<!--
 * @Author: your name
 * @Date: 2021-01-26 11:07:26
 * @LastEditTime: 2021-01-27 17:55:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tlwok-front-purchase-platfrom\src\layouts\LayoutHeader.vue
-->
<template>
  <el-header class="header">
    <img class="logo" src="@/assets/logo.png" />
    <h3 class="title flex-1">{{ title }}</h3>

    <div class="flex-1"></div>
    <el-button
      type="light"
      icon="el-icon-refresh"
      size="small"
      @click="reloadPage"
      >刷新</el-button
    >

    <el-button type="text" icon="el-icon-headset" @click="onClickCustomerService">妥客服</el-button>

    <el-dropdown v-if="isAdmin" trigger="click" @command="handleCommand">
      <el-button type="text" icon="el-icon-s-tools">设置</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, key) in dropdownMenuList"
          :key="key"
          :command="item.pathName"
          >{{ item.label }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

    <template v-if="isLogin">
      <div class="user flex-center">
        <!-- <el-avatar :size="35" :src="userPhoto"></el-avatar> -->
        <span>{{ userInfo.name }}</span>
      </div>
      <el-button type="text" icon="el-icon-switch-button" @click="signOut">退出</el-button>
    </template>
    <el-button v-else type="text" icon="el-icon-user-solid" @click="onClickLogin">登录</el-button>
  </el-header>
</template>

<script>
import User from '@/store/user';
import { logout } from '@/api/user';

export default {
  name: 'LayoutHeader',
  props: {
    title: {
      type: String,
      default: '天章集团采购',
    },
  },
  data () {
    // 这里存放数据
    return {
      userPhoto:
        '//img-b2b.jcloudcs.com/1deac225-33a2-4892-81e7-3321727c78f5.png',
      dropdownMenuList: [
        { pathName: 'purchaserAccess', label: '采购商权限' },
        { pathName: 'adsTools', label: '广告设置' },
        { pathName: 'accountAccess', label: '账户权限' },
      ],
    };
  },
  created () {
    this.initTitle();
  },

  computed: {
    userInfo () {
      return User.userInfo;
    },

    isLogin () {
      return User.isLogin;
    },

    isAdmin () {
      return User.isAdmin;
    },
  },

  watch: {
    title () {
      this.initTitle();
    },
  },
  methods: {
    initTitle () {
      document.title = this.title;
    },

    reloadPage () {
      location.reload();
    },

    async signOut () {
      const loading = this.$loading();
      try {
        await logout();
        location.reload();
      } catch (error) { }
      loading.close();
    },

    async onClickLogin () {
      const loading = this.$loading();
      try {
        User.gotoLogin();
      } catch (error) {
        loading.close();
      }
    },

    handleCommand (command) {
      this.$router.push(`/admin/settingsMenu/${command}`);
    },

    onClickCustomerService () {
      window.xn('setCustomerInfo', {
        uid: this.userInfo?.id,
        uname: this.userInfo?.name,
      });
      window.xn('openChat', 'wo_1004667_template_9999');
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  min-width: 1000px;
  display: flex;
  height: 65px;
  padding: 0 38px;
  align-items: center;
  // box-shadow: 0px 3px 5px #ddd;
  border: solid 1px $--color-border;
  background-color: #fff;
  > * {
    margin-right: 60px;
    &:last-child {
      margin-right: 0;
    }
  }
}

.logo {
  // width: 85px;
  height: 40px;
}

.title {
  padding: 5px 12px;
  border-left: 4px solid $--color-primary;
  font-size: 22px;
  color: #C7061A;
}

.user {
  span {
    margin-left: 10px;
  }
}
</style>
